
<template>
<!--  插值指令：将此处显示的文本与响应式变量的值进行绑定
      如果修改变量的值，页面显示的文本也会随着改变-->
  <h1>我是页面</h1>
  <span>{{info}}</span>
  <p>{{info}}</p>
  <h1>{{info}}</h1>
<!-- 响应式变量的值也可以拼接 -->
  {{info+"周末愉快"}}
  <hr>
  <p v-text="info"></p>
  <p v-html="info"></p>
  <button @click="f">点我</button>
</template>

<script setup>
import {ref} from "vue";
//1.响应式变量，注意必须引用
const info = ref('我是A页面2')
//箭头函数()=>{}
const f = () =>{
  //在JS中使用响应式变量的值，必须使用.value
  info.value='值<b>改变了</b>';
};

</script>

<style scoped>

</style>